<!DOCTYPE html>
<html>
  <head>
		<title>上传房屋照片</title>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link href="../jsp/css/houseImg.css" rel="stylesheet">
		<!-- 插件样式 -->
		<link rel="stylesheet" type="text/css" href="./css/sm.css">

		<!-- 插件js -->
		<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script src="./js/zepto.js"></script>
		<script src="./js/jquery.form.js"></script>
		<script src="./js/sm.js"></script>
		<script src="./js/sm-extend.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
  </head>
  
  <body style="background: #fff;">
		<div class="house_img--box">
			<h3 class="h_h3">上传房屋照片</h3>
			 <form action="" method="post" enctype="multipart/form-data" id="form1"> 
			 
			<ul class="house_img--list">
			</ul>
			</form>
			<button id="uploadBtn" class="upload_btn">暂无照片，下一步</button>
		</div>

	</body>
</html>

<script type="text/javascript">
	window.$$=window.Zepto = Zepto;
	var houseId = $.getUrlParam("houseId");
	var form1 = new FormData();
	var i=0;
	var inpit_id;
	var input_img;
	var li_id;
	function addText(){
		var html="";	
		inpit_id="input"+i;
		input_img="input_img"+i;
		html+="<li>";
		html+="<label for="+inpit_id+" class=\"img1\" >";
		html+="<div id=\"fileList"+i+"\" class=\"fileLists\">";
		html+="<img src=\"../images/addimg.png\" class=\"addimg\" id='"+input_img+"' data='1'>";
		html+="</div><input type=\"file\" accept=\"image/*\" name=\"files\" id='"+inpit_id+"' class=\"file\" style=\"touch-action: none;\">";
		html+="</label>";
		html+="<span class='delete_img' ></span>";
		html+="</li>";
		i++;
		$(".house_img--list").append(html);	
		var id_="input"+(i-1);
		var img_id="input_img"+(i-1);
		$("#"+id_).on("change",function(){
			var _imgUrl = getObjectURL(this.files[0]);
			$("#"+img_id).attr("src",_imgUrl);
			$("#"+img_id).attr("data",0);
			addText();
			$("#uploadBtn").text("确认上传");
		});
	}
	
	$(function(){
		addText();
		var imgArr = [];
		// 删除图片事件
		$(".house_img--list").on('click', 'li .delete_img', function(){
			var _this = $(this);
			var flag=$(this).parent().find("img").attr("data");
			if($(".house_img--list li").length==1)$("#uploadBtn").text("暂无照片，下一步");
			if($(".house_img--list li").length==2)$("#uploadBtn").text("暂无照片，下一步");
			if(flag==1){
			}else{
				var _srcId = _this.siblings(".up_img").attr("src-id");
				if (_this.parents("ul").find("li").length === 1) {
					$("#uploadBtn").removeClass("has_img").html("暂无图片，下一步");
					imgArr = [];
				} else {
					for (var i = 0; i < imgArr.length; i++) {
						if (i == _srcId) {
							imgArr.splice(i, 1);
						}
					}
				}
				_this.parents("li").remove();
			}

		});

		// 点击上传图片按钮
	$("#uploadBtn").on("click", function(){
	var len=$(".house_img--list li").length;
	if (len>1) {
	$$.showPreloader('正在上传');
	$('#form1').ajaxSubmit(  
	        {
	            url: '../houseEntrust/upload',
	            type: 'post',
	            dataType: 'json',
	            data :{"houseId" :houseId,"_selectImgArr":JSON.stringify(imgArr)},
	            beforeSubmit: function () {},
	            success: function (data) {
	            	$$.hidePreloader();
	                if(data.success){
	    				$$.alert("提交成功",function(){
	    					window.location.href = 'weituoWay.html?houseId='+houseId;
	    					});
	                }
	            },
	            error : function (err){
	            	$$.alert("提交失败");
	            	$$.hidePreloader();
	            },
	            clearForm: false,//禁止清楚表单
	            resetForm: false //禁止重置表单
	        });
				console.log('imgArr:', imgArr);   // 用户选择的图片（数组格式）
				// 上传图片成功后跳转到选择委托方式页面
				// window.location.href = 'weituoWay.html'

			} else {
				// 如果用户不上传图片，则直接跳转到选择委托方式页面
				window.location.href = 'weituoWay.html?houseId='+houseId;
			}
			});	
	});

</script>
